
function Page(el, options = {}) {
    
    this.el = document.querySelector(el)
    this.options = options

    
    this.init()
}

Page.prototype.init = function () {
    
    // 创建分页标签
    this.createTag()

    // 绑定点击事件
    this.divEvent()
    
}

// 创建分页标签
Page.prototype.createTag = function () {

    // 清空盒子内容
    this.el.innerHTML = ""

    let pageTag = this.options.pageTag
    
    for (let key in pageTag) {
        this.createP("p", pageTag[key], this.el)
    }

    //  创建分页页码
    this.createNum()
}

// 创建p标签
Page.prototype.createP = function (tagName, content, fatherObj) {
  
    let pObj = document.createElement(tagName)
    pObj.innerText = content
    pObj.style.border = "solid 1px black"
    pObj.style.margin = "0 5px"
    pObj.style.padding = "0 5px"
    pObj.style.display = "inline-block"
    // 默认选中页码
    if (content === this.options.pageInfo.pageNum) pObj.style.background = "orange"
    fatherObj.appendChild(pObj)
}

//  创建分页页码
Page.prototype.createNum = function () {

    // 1 获取第3个分页标签
    let listTag = this.el.querySelector("p:nth-child(3)")
    listTag.style.border = "none"
    listTag.style.margin = "0px"
    listTag.style.padding = "0px"
    
    // 1 2 3 4 5 ... 99 100  	     pageNum < 5
    // 1 2 3 4 5 6 7 ... 99 100     pageNum == 5
    // 1 2 ... 4 5 6 7 8 .. 99 100  pageNum > 5 && pageNum < 总页数(totalPage)-4
    // 1 2 ... 96 97 98 99 100      pageNum >= 总页数(totalPage)-4

    let pageNum = this.options.pageInfo.pageNum

    //总页数 = 向上取整（总条数 / 每页显示条数）
    this.options.pageInfo.totalPage = Math.ceil(this.options.pageInfo.totalData / this.options.pageInfo.pageSize)
    let totalPage = this.options.pageInfo.totalPage

    // 判断当点击到第一页和最后一页的时候，鼠标不能在点击，禁用
    let pObjs = this.el.querySelectorAll("P")
    if (this.options.pageInfo.pageNum === 1){
       pObjs[0].style.cursor="not-allowed"
       pObjs[1].style.cursor="not-allowed"
    }
    if (this.options.pageInfo.pageNum ===  this.options.pageInfo.totalPage){
       pObjs[3].style.cursor="not-allowed"
       pObjs[4].style.cursor="not-allowed"
    }


    if (totalPage < 7) {
        for (let i = 1; i <= totalPage; i++) {
            this.createP("p", i, listTag)
        }
    } else if (pageNum < 5) {
        for (let i = 1; i <= 5; i++) {
             this.createP("p", i, listTag)
    }
        this.createP("p", "...", listTag)
        this.createP("p", totalPage - 1, listTag)
        this.createP("p", totalPage, listTag)

    } else if (pageNum == 5) {
        for (let i = 1; i <= 7; i++) {
        this.createP("p", i, listTag)
        }
        this.createP("p", "...", listTag)
        this.createP("p", totalPage - 1, listTag)
        this.createP("p", totalPage, listTag)

    } else if (pageNum > 5 && pageNum < totalPage - 4) {
        for (let i = 1; i <= 2; i++) {
        this.createP("p", i, listTag)
        }
        this.createP("p", "...", listTag)
        this.createP("p", pageNum - 2, listTag)
        this.createP("p", pageNum - 1, listTag)
        this.createP("p", pageNum, listTag)
        this.createP("p", pageNum + 1, listTag)
        this.createP("p", pageNum + 2, listTag)
        this.createP("p", "...", listTag)
        this.createP("p", totalPage - 1, listTag)
        this.createP("p", totalPage, listTag)
    } else if (pageNum >= totalPage - 4) {
        for (let i = 1; i <= 2; i++) {
        this.createP("p", i, listTag)
        }
        this.createP("p", "...", listTag)
        for (let i = totalPage - 4; i <= totalPage; i++) {
        this.createP("p", i, listTag)
        }
    }
}


// 绑定点击事件
Page.prototype.divEvent = function () {
    
    
    this.el.onclick = (evt) => {
       
        let e = evt || window.event
       
        let target = e.target || e.srcElement
       
        if (target.nodeName === "P") {

            switch (target.innerText) {

                case this.options.pageTag.first:
                    this.options.pageInfo.pageNum = 1
                    this.createTag() // 清空盒子内容，重新创建
                    break;

                case this.options.pageTag.prev:
                    if (this.options.pageInfo.pageNum === 1){
                        return
                    } else{
                        this.options.pageInfo.pageNum--
                        this.createTag()
                    }                    
                    break;

                case this.options.pageTag.next:
                    if (this.options.pageInfo.pageNum === this.options.pageInfo.totalPage){
                     return
                    } else{
                    this.options.pageInfo.pageNum++
                    this.createTag()
                    }
                    break;

                case this.options.pageTag.last:
                    this.options.pageInfo.pageNum = this.options.pageInfo.totalPage
                    this.createTag()
                    break;

                default:
                    if (parseInt(target.innerHTML) > 0) {                     
                        this.options.pageInfo.pageNum = parseInt(target.innerHTML)//从页面获取的数据是字符串类型
                        this.createTag()
                    }
                    break;
        }
    }
    }
}
